<template>
    <div class="hosAptitude">
        <Header style="z-index:1025">
            <header-menu></header-menu>
        </Header>
        <div class="main">
            <div class="content">
                <div class="img"><img src="../GreatHospital/img/hospital.png" alt=""></div>
                <div class="cont">创建医院主页</div>
                <div class="step">
                    <Steps :current="2">
                        <Step title="填写医院名称"></Step>
                        <Step title="填写医院基本信息"></Step>
                        <Step title="上传医院资质"></Step>
                    </Steps>
                </div>
                <div class="step-tit">
                    <p class="p1">请上传医院资质文件照片以便我们对您医院的资质进行审核</p>
                    <p>（资质信息只有您自己能看到，不会显示给其他人）</p>
                    <ul>
                        <li>
                            <el-upload
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture-card"
                                    :limit="3"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </li>
                    </ul>
                    <div class="hint"><p><span>*</span>请上传 <span>1.营业执照or民办非企业单位证书</span> <span>2.医疗机构执业许可证</span><span>3.医疗广告审查证明</span></p></div>
                    <div class="up-hint"><p>*证件大小不超过300KB。*证件需在有效期内。*需盖有地方卫生部门公章。*证件名称需与医疗机构执业许可证名称匹配</p></div>
                </div>
                <div class="formlist">
                    <p>您的联系方式：</p>
                    <ul>
                        <li>
                            <div class="ts"><span>*</span>姓名：</div><div class="int"><input type="text"></div>
                        </li>
                        <li>
                            <div  class="ts"><span>*</span>手机：</div><div class="int"><input type="text"></div>
                        </li>
                        <li>
                            <div  class="ts"><span>&nbsp;</span>座机：</div><div class="int"><input type="text"><span>选填</span></div>
                        </li>
                        <li>
                            <div  class="ts"><span>&nbsp;</span>QQ：</div><div class="int"><input type="text"><span>选填</span></div>
                        </li>
                        <li>
                            <div  class="ts"><span>*</span>Email：</div><div class="int"><input type="text"></div>
                        </li>
                        <li>
                            <div  class="ts"><span>*</span>身份：</div><div class="choose"><input  type="radio" name="id"><span>医院管理者</span><input type="radio"name="id"><span>医院销售部</span><input type="radio"name="id"><span>医院客服部</span><input type="radio"name="id"><span>其他</span></div>
                        </li>
                    </ul>

                </div>
                <div class="next"><button>完成</button><a href="javascript:;" @click="pre()">返回上一步</a></div>

            </div>

        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>
</template>

<script>
    import BottomIcon from '../../components/BottomIcon/'
    import PageFooter from '../../components/Footer/'
    import HeaderMenu from '@/components/Header/'
    export default {
        name: "hosAptitude",
        components:{
            BottomIcon,
            PageFooter,
            HeaderMenu
        },
        data() {
            return {
                dynamicValidateForm: {
                    domains: [{
                        value: ''
                    }],
                    email: ''
                }
            };
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

            pre() {
                this.$router.push({path:'/hosinformation'})
            }

        }
    }
</script>

<style scoped lang="less">
    .main{
        background-color: #FFA3B2;
        padding: 52px 0;
    .content{
        width: 1200px;
        height:920px;
        border-radius: 6px;
        background-color: #fff;
        margin: 0 auto;
    .img{
        margin: 23px 0 0 42px;
        float: left;
    }
    .cont{
        float: left;
        font-size: 24px;
        color: #ff5371;
        margin: 23px 0 0 8px;
    }
    .step{
        clear: both;
        padding: 40px 0 0 176px;
    }
    .step-tit{
        text-align: center;
    }
    .step-tit p{
        font-size: 16px;
    }
    .step-tit .p1{
        margin: 53px 0 0px 0;

    }
    .step-tit ul{
        margin: 35px auto 0;
        width: 620px;
        overflow: hidden;
    }
    .step-tit ul li{
        /*float: left;*/
        /*width: 190px;*/
        /*height: 190px;*/
        /*padding: 0 10px;*/
    }
    .step-tit ul li span{
        position: absolute;
        right: 0;
        top: 0;
    }

    .el-upload__text{
        color: #FE5371;
        padding: 0 10px;
    }
    .up-hint p{
        font-size: 12px;
        color: #999999;
    }
    .hint{
        margin-top: 10px;
    }
    .hint span{
        color: #FE5371;

        padding-left: 20px;
    }
    .formlist{
        width: 528px;
        margin: 0 auto;
    }
    .formlist p{
        margin-top: 20px;
        font-size: 16px;
    }
    .formlist ul li{
        clear: both;
        padding: 16px 0 0 90px;
    }
    .formlist div{
        float: left;
    }
    .ts{
        width: 80px;
        text-align: right;
        font-size: 14px;
    }
    .ts span{
        color: #FE5371;
    }
    .int input{
        width: 228px;
        height: 32px;
    }
    .int span{
        padding-left: 10px;
        color: #999999;
    }
    .choose input{
        width: auto;
        height: auto;
        margin: 0 8px;
    }

    }
    .next{
        clear: both;
        text-align: center;
        padding: 40px 0 0 80px;
    }
    .next button{
        width: 228px;
        height: 40px;
        background-color: #ff5371;
        border-radius: 4px;
        outline: none;
        border: none;
        font-size: 20px;
        color: #fff;
    }
    .next a{
        font-size: 14px;
        padding-left: 20px;
        color:#ff5371 ;
    }


    }
</style>